<template>
	<view class="empire-card" :style="customStyle">
		<EmpireHeader
			v-if="title"
			:title="title"
			:show-all="showAll"
			:to="to"
			@header-click="handleHeaderClick"
		>
			<template #marker>
				<slot name="marker"></slot>
			</template>
		</EmpireHeader>
		<view v-if="$slots.title" class="empire-card__custom-header">
			<slot name="title"></slot>
		</view>
		<view v-if="divider" class="empire-card__divider"></view>
		<view class="empire-card__content" :style="bodyStyle">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
import EmpireHeader from './header.vue';
import { ref, onMounted } from 'vue';
import { pushNavigateTo } from '@/common/utils/navigate.js';

const props = defineProps({
	title: {
		type: String,
		default: undefined
	},
	showAll: {
		type: Boolean,
		default: false
	},
	customStyle: {
		type: Object,
		default: null
	},
	bodyStyle: {
		type: Object,
		default: null
	},
	divider: {
		type: String,
		default: 'none'
	},
	to: {
		type: [String, Object],
		default: undefined
	},
	backgroundColor: {
		type: String,
		default: '#f5f5f5'
	}
});
const dividerStyle = ref();
function handleHeaderClick() {
	pushNavigateTo({ path: props.to, query: { title: props.title } });
}

onMounted(() => {
	dividerStyle.value = `1px ${props.divider} #e6e6e6`;
});
</script>

<style lang="scss" scoped>
.empire-card {
	background-color: v-bind(backgroundColor);
	&__header {
		display: flex;
		justify-content: space-between;
		height: 64rpx;
		line-height: 64rpx;
	}
	&__custom-header {
	}
	&__content {
		border-radius: 24rpx;
	}
}
.empire-card__title {
	flex: 3;
	display: inline-flex;
}
.title {
	font-size: 30rpx;
	margin-right: 30rpx;
}
.empire-card__divider {
	border: v-bind(dividerStyle);
}
.empire-card__more {
	flex: 1;
	display: inline-flex;
	justify-content: flex-end;
}
.more {
	margin-right: 4rpx;
	&:hover {
		cursor: pointer;
	}
}
</style>
